<template>
	<view class="pages">
		<view class="btn-wrap">

			<view class="btn-msg" v-for="(item,index) in btnList" :key="index" @click="btnTag(index)"
				:class="btnIndex==index?'activeBtn':''">{{item}}</view>

		</view>
		<view class="index-coupon">
			<scroll-view scroll-x="true" class="index-coupon-view">
				<view class="index-coupon-msg" v-for="(item,index ) in classList" :key="index">
					<view class="index-coupon-msg-msg" :class="tagIndex==index?'tagActive':''"
						@click="manuBtn(1,index,item)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="dis navBtnWrap">
			<view class="navBtn-left dis" @click="chooseLocation">
				<image src="../../static/my/icon_shdz.png" mode=""></image>
				{{locationMsg||'选择地址'}}
			</view>
			<view class="navBtn-right dis">
				<view v-for="(item,index) in navList" :class="navIndex==index?'navActive':''" @click="navBtn(index)"
					:key="index">{{item.tit}}</view>

			</view>

		</view>
		<view class="navBtnWrap" v-if="hotList.length!=0">
			<hotList :hotList="hotList"></hotList>
		</view>
		<view v-else>
			<noData></noData>
		</view>
		<home></home>
	</view>
</template>

<script>
	import home from '@/components/home/index.vue'
	import noData from '@/components/com/noData.vue'
	import {
		getActivityCategoryList,
		getActivityList
	} from '@/api/togeterRich/index.js'
	import hotList from "@/pages/index/components/hotList.vue"
	export default {
		components: {
			hotList,
			noData,
			home
		},
		data() {
			return {
				activityType: 1,
				btnIndex: 0,
				btnList: ['亲子研学', '企业团建'],
				hotList: [],

				classList: [],
				classId: 0,
				navList: [{
						tit: '销售'
					},
					{
						tit: '距离'
					},
					{
						tit: '人气'
					}
				],
				navIndex: 0,
				tagIndex: 0,
				navData: {
					popularityOrder: '',
					distanceOrder: '',
					salesOrder: ''
				},
				locationMsg: '',
				location: {
					latitude: 0,
					longitude: 0,
				},
				locationData: {}

			}
		},
		onLoad() {
			this.locationData = uni.getStorageSync('location');
			if (this.locationData) {
				this.location = {
						latitude: this.locationData.latitude,
						longitude: this.locationData.longitude
					},
					this.regexAddressBean(this.locationData.address)
				console.log("111")
			}
			this.init()
			this.getList()
		},
		methods: {
			btnTag(index) {
				this.btnIndex = index
				if (this.btnIndex == 0) {
					this.activityType = 1
				} else if (this.btnIndex == 1) {
					this.activityType = 2
				}
				this.init()
				this.getList()
				return;
				if (this.btnIndex == 1) {
					let data = {
						id: this.id
					}
					getAdoptionqueryAll(data).then(res => {
						// console.log(res, 'jjjjj')
						this.allPcList = res.data
						this.allPcList.map(reee => {

							this.$set(reee, 'num', null)

						})
					})
				} else {
					this.orderInfoList = []
				}
			},


			init() {
				getActivityCategoryList().then(res => {
					let all = {
						activityType: this.activityType,
						children: null,
						id: 0,
						name: "全部"
					}
					this.classList = res.data
					this.classList.unshift(all)
					this.classId = this.classList[0].id
					console.log(res, '亲子研学分类')
				})

			},
			getList() {

				let data = {
					activityType: this.activityType,
					...this.location,
					...this.navData,
					cid: this.classId
				}
				getActivityList(data).then(res => {
					this.hotList = res.data.list
					// console.log("iii", res)
				})
			},
			chooseLocation() {
				let that = this

				uni.chooseLocation({
					success: function(res) {
						console.log(res, 'sdd ')
						that.regexAddressBean(res.address)
						uni.setStorageSync('location', res);
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);

						that.location = {
							latitude: res.latitude,
							longitude: res.longitude,
						}
						that.getList()

					},
					fail(err) {
						console.log(err, 'ddddd')
					}
				});
			},
			navBtn(index) {
				this.navIndex = index


				if (this.priceIndex == 0) {
					this.navData.salesOrder = "DES"
				} else if (this.priceIndex == 1) {
					this.navData.distanceOrder = "ASC"
				} else {
					this.navData.popularityOrder = "DES"
				}
				this.getList()




			},
			manuBtn(type, index, item) {
				if (type == 1) {
					this.tagIndex = index
					this.classId = item.id
					this.getList()
				}
			},
			regexAddressBean(address) {

				var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;

				var province = [];
				var addressBean = {
					province: null,
					country: null,
					city: null,
					address: null,
				};

				// console.log('address', address);
				// console.log('addressBean', addressBean);
				regex = /^(.*?[市]|.*?[州]|.*?地区|.*?特别行政区)(.*?[区]|.*?[市]|.*?[县])(.*?)$/g;
				var addxress = regex.exec(address);
				console.log('addxress', addxress);
				this.locationMsg = addxress[1]

				return addxress[1];

			}

		}

	}
</script>

<style scoped lang="scss">
	.btn-wrap {
		justify-content: space-around;
		width: 100%;
		// margin: 0 auto;
		padding: 30rpx;
		display: flex;
		// justify-content: space-between;

		.btn-msg {
			border-radius: 100rpx;
			width: 30%;
			text-align: center;
			background: #fff;
			padding: 20rpx;
			border: 1rpx solid #333;
		}
	}

	.activeBtn {
		color: #fff;
		border: 1rpx solid $maincolor !important;
		background: $maincolor !important;
	}

	page {
		background: #fff;
	}

	.navActive {
		font-weight: 600;
		border-bottom: 6rpx solid $maincolor;
	}

	.navBtnWrap {
		padding: 0 30rpx;
		margin: 20rpx auto;
		justify-content: space-between;

		.navBtn-left {
			// width: 25%;

			image {
				margin-right: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.navBtn-right {
			width: 60%;

			justify-content: space-between;
		}
	}

	.pages {

		background: #fff;
	}

	.tagActive {
		background: $maincolor !important;
		color: #fff !important;
	}

	.index-coupon {
		padding: 20rpx;

		.index-coupon-view {
			white-space: nowrap;
			width: 680rpx;
			margin: 0 auto;

		}

		width: 100%;

		.index-coupon-msg {
			.index-coupon-msg-msg {

				padding: 8rpx 29rpx;
				color: #000;
				font-size: 24rpx;
				background: #F5F5F5;
				border-radius: 10rpx;

			}

			display: inline-block;
			opacity: 1;
			margin-right: 20rpx;



		}
	}
</style>